<template>
    <view>
        <!-- <view class="container">
  <scroll-view scroll-y='true' style="height:850rpx">
    <view class="weui-cells weui-cells_after-title">
      <checkbox-group bindchange="checkboxChange">
        <label class="weui-cell weui-check__label" wx:for="{{services}}" wx:key="index">
          <view class="weui-cell__bd">{{item.name}}</view>
          <view class="weui-cell__hd">
            <checkbox value="{{item.id}}" checked="{{item.checked}}" color="#FF8722"/>
          </view>
        </label>
      </checkbox-group>
    </view>
  </scroll-view>
</view> -->
        <view class="container">
            <checkbox-group @change="checkboxChange" :data-items="item" class="group">
                <label class="weui-cell weui-check__label" v-for="(item, index) in services" :key="index">
                    <view class="weui-cell__bd">{{ item.name }}</view>

                    <view class="weui-cell__hd">
                        <checkbox :value="item.id" :checked="item.checked" color="#FF8722" />
                    </view>
                </label>
            </checkbox-group>
        </view>

        <view class="savebtn" @tap="onSave">确定</view>
    </view>
</template>

<script>
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            services: [],
            servicesid: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let servicesid;
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.on('acceptData', (data) => {
            servicesid = data.servicesid;
        });
        console.log('servicesid:', servicesid);

        _request
            .postObj('/category/getAll', {})
            .then((res) => {
                let data = res.data.data;

                if (servicesid && data && data.length > 0) {
                    servicesid.forEach((id) => {
                        data.forEach((item) => {
                            if (item.id == id) {
                                item.checked = true;
                            }
                        });
                    });
                }

                this.setData({
                    services: data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    methods: {
        checkboxChange(e) {
            console.log('checkbox发生change事件，携带value值为：', e);
            const services = this.services;
            const values = e.detail.value;

            if (values.length > 3) {
                uni.showToast({
                    title: '最多选择三项服务！',
                    icon: 'none'
                });
                this.setData({
                    services: this.services
                });
                return;
            } else {
                for (let i = 0, lenI = services.length; i < lenI; ++i) {
                    services[i].checked = false;

                    for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
                        if (services[i].id == values[j]) {
                            services[i].checked = true;
                            break;
                        }
                    }
                }

                this.setData({
                    services: services
                });
            }

            console.log(this);
        },

        onSave() {
            var services = this.services;
            var servicesChecked = [];
            var servicenames = '';

            for (let i = 0, lenI = services.length; i < lenI; ++i) {
                if (services[i].checked) {
                    servicesChecked.push(services[i]);
                }
            }

            var servicenames = servicesChecked.map((v) => {
                return v.name;
            });
            var servicenamesid = servicesChecked.map((v) => {
                return v.id;
            });
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2];
            console.log('prevPage', prevPage);

            prevPage.setData({
                services: servicenames,
                servicesid: servicenamesid
            });
            uni.navigateBack({
                delta: 1
            });
        }
    }
};
</script>
<style>
.container {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 10rpx;
    align-items: center;
}

.text1 {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    width: 160rpx;
}

.weui-cells {
    position: relative;
    margin-top: 1.17647059em;
    background-color: #ffffff;
    line-height: 1.41176471;
    font-size: 17px;
    width: 100%;
}

.weui-cells_after-title {
    margin-top: 0;
}

.weui-cell {
    padding: 10px 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.eui-cell__bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.savebtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 300rpx 30rpx 0 30rpx;
    position: fixed;
    bottom: 50rpx;
}

page {
    background-color: #fbfbfb;
}

.group {
    width: 100%;
}
</style>
